<template>
  <div class="radar-chart-04 chart" ref="radarChart04"></div>
</template>

<script setup>
import { onMounted, ref, inject } from "vue";

const radarChart04 = ref(null);
const echarts = inject("$echarts");

const dataSet = [
  ["录像功能", "点位分布", "AI识别", "离线率", "在线率", "运行状态"],
  [120, 118, 130, 100, 99, 145],
  [110, 100, 30, 95, 80, 130],
];
const maxValue = [...dataSet[1], ...dataSet[2]].reduce(
  (m, v) => Math.max(m, v),
  -Infinity
);

const radius = 0.8;
let option = {
  compCode: "C202309031",
  animationDuration: 2000,
  animationEasing: "cubicInOut",
  backgroundColor: "#000000",
  tooltip: {
    // trigger: 'axis',
    // show: true
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
  },
  polar: {
    radius: radius * 100 + "%",
    center: ["50%", "50%"],
  },
  angleAxis: {
    type: "category",
    clockwise: false,
    boundaryGap: false,
    splitLine: {
      show: false,
    },
    axisLine: {
      show: false,
    },
  },
  radiusAxis: {
    type: "value",
    max: 150,
    interval: 30,
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  radar: {
    indicator: dataSet[0].map((v) => ({ 
      name: v, 
      max: Math.ceil(maxValue / 30) * 30
    })),
    radius: radius * 100 + "%",
    center: ["50%", "50%"],
    shape: "polygon",
    splitNumber: 5,
    axisName: {
        color: "#ffffff",
        fontSize: 24,
    },
    splitArea: {
      areaStyle: {
        color: [
          "rgba(255,255,255,0.1)",
          "rgba(255,255,255,0.03)",
          "rgba(255,255,255,0.1)",
          "rgba(255,255,255,0.03)",
        ],
      },
    },
    splitLine: {
      lineStyle: {
        color: ["#fff", "#fff", "#fff", "#fff", "#fff", "#fff"].reverse(),
        width: 2,
      },
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255)",
      },
    },
  },

  series: [
    {
      name: "s2",
      type: "radar",
      tooltip: {
        trigger: "item",
      },
      data: [{ value: dataSet[2] }],
      symbol: "circle",
      symbolSize: 12,
      itemStyle: {
          color: "#fe897a",
          borderColor: "rgba(87,201,255,0.2)",
          borderWidth: 0,
      },
      areaStyle: {
          color: "#a76e24",
      },
      lineStyle: {
          color: "#fe897a",
          width: 5,
      },
      z: 4,
    },
    {
      name: "s1",
      type: "radar",
      tooltip: {
        trigger: "item",
      },
      data: [
        {
          value: dataSet[1],
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            },
            color: "#fff",
            fontSize: 20,
          },
        },
      ],
      symbol: "rect",
      symbolSize: 12,
      itemStyle: {
        color: "rgba(87,201,255,0.8)",
        borderColor: "rgba(87,201,255,0.2)",
        borderWidth: 0,
      },
      areaStyle: {
        color: "rgba(0,0,0,0)",
      },
      lineStyle: {
        type: "dashed",
        color: "rgba(13, 178, 255, 1)",
        width: 5,
      },
      z: 3,
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(radarChart04.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
